<template>
    <div >
        <NavHeader></NavHeader>
        <div class="tk_box">
            <div class="question">
                <div class="q_header">你知道计算三重积分的一般步骤是</div>
                <el-button
                    id="test"
                    @click="toBottom"
                    round
                    type="primary"
                >
                    回复
                </el-button>
                <div class="q_detail">
                    <div class="q_box">
                         <span class="q_author">余兰萍</span><span class="q_time">2020-04-24 17:50</span>
                    </div>
                </div>
            </div>
            <div class="answer">
                <div class="topictop">共100条回复</div>
                <div class="topicdetail">
                    <div class="topicUser">XXX</div>
                    <p class="t_details">画图-确定l的方程(自变量的取值范围)-转换成定积分-计算
                    </p>
                </div>
            </div>
            <div class="tback">
                <h2>回复话题</h2>
                <el-input
                 type="textarea"
                 :autosize="{ minRows: 5, maxRows: 5}"
                 placeholder="请输入内容"
                 v-model="textarea"
                 class="tb_text"
                 >
                </el-input>
                <div class="tb_btn"><el-button> 回复</el-button></div>
            </div>
            <div id="bottomTarget"></div>
        </div>
    </div>
</template>

<script>
import NavHeader from '../components/NavHeader.vue'
export default {
    data(){
        return{
          textarea:'',
        }
    },
    components:{
        NavHeader,
    },
    methods:{
        toBottom(){
           let bottomTarget =  document.getElementById('bottomTarget')
           bottomTarget.scrollIntoView();
        }
    },
}
</script>

<style lang="scss" scoped>
  .tk_box{
    width: 100%;
    min-height: 1000px;
    background-color: #f2f4f7;
    padding: 60px 0 20px 0;
    .question{
      width: 80%;
      height: 150px;
      border-radius: 10px;
      background-color: white; 
      margin: 16px auto;
      position:relative;
      #test{
        position: absolute;
        top:20px;
        right: 20px;
      }
      .q_header{
        width: 100%;
        height: 99px;
        line-height: 99px;
        font-size: 20px;
        font-weight: bold;
        padding-left: 50px;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
      }
      .q_detail{
        width: 100%;
        .q_box{
          width: 100%;
          margin-top: 10px;
          margin-left: 50px;
          color:#8A8B99;
          .q_author{
            margin-right: 10px;
          }
        }
      } 
    }
    .answer{
      width: 80%;
      min-height: 600px;
      border-radius: 10px;
      background-color: white; 
      margin: 16px auto;
      .topictop{
        height: 40px;
        line-height: 40px;
        padding-left: 50px;
        font-size: 14px;
        color: #8A8B99;
      }
      .topicdetail{
        width: 100%;
        min-height: 100px;
        padding: 20px 50px 20px 50px;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
        .topicUser{
           margin-bottom: 10px; 
        }
        .t_details{
            font-size: 14px;
            font-weight: bold;
            width: 250px;
            word-wrap: break-word; 
            word-break: break-all;
        }
      } 
    }
    .tback{
      width: 80%;
      height: 220px;
      border-radius: 10px;
      background-color: white; 
      margin: 16px auto;
      h2{
        padding-left: 30px;
        padding-top: 10px;
      }
      .tb_text{
        width: 90%;
        margin: 10px 20px;
      }
      .tb_btn{
        padding-left: 30px;
      } 
    }
  }
</style>